import React, { useRef, useState, useEffect } from "react";
import { Canvas } from "@react-three/fiber";

import { useLoader, useFrame } from "@react-three/fiber";

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";

import { AnimationMixer, AnimationClip, AmbientLight } from "three";

import { OrbitControls } from "@react-three/drei";

// 定义一个接口，用于指定AnimatedModel组件的props
interface AnimatedModelProps {
  modelPath: string; // 3D模型的路径
  scale?: [number, number, number]; // 模型的缩放，默认为[1, 1, 1]
  position?: [number, number, number]; // 模型的位置，默认为[0, 0, 0]
}

// AnimatedModel组件，用于加载和播放3D模型的动画
const AnimatedModel: React.FC<AnimatedModelProps> = ({
  modelPath,
  scale = [1, 1, 1],
  position = [0.5, 100, 0.5],
}) => {
  // 使用useLoader加载GLTF模型
  const gltf = useLoader(GLTFLoader, modelPath);

  // 创建一个AnimationMixer实例，用于管理动画
  const mixer = useRef<AnimationMixer>(new AnimationMixer(gltf.scene));

  // 保存加载的动画剪辑
  const [animations] = useState<AnimationClip[]>(gltf.animations);

  // 创建一个环境光
  const light = new AmbientLight(0x000000, 1);
  gltf.scene.add(light);

  // 在组件加载完成后，播放所有动画
  useEffect(() => {
    if (animations && animations.length > 0) {
      animations.forEach((clip) => {
        mixer.current.clipAction(clip).play();
      });
    }
  }, [animations]);

  // 使用useFrame在每一帧更新动画
  useFrame((state, delta) => mixer.current.update(delta));

  // 设置模型的缩放和位置
  gltf.scene.scale.set(...scale);
  gltf.scene.position.set(...position);

  // 返回一个primitive组件，渲染3D模型
  return <primitive object={gltf.scene} />;
};

// GLBViewer组件，用于渲染Canvas和3D模型
const GLBViewer: React.FC = () => {
  return (
    <>
      <Canvas>
        {/* 添加环境光 */}
        <ambientLight />
        {/* 添加方向光 */}
        <directionalLight position={[0, -3, 0]} />

        {/* 渲染AnimatedModel组件 */}
        <AnimatedModel
          modelPath="../public/modules/over.glb" // 模型路径
          position={[-0.5, -3, -0.5]} // 模型位置
          scale={[3, 2.5, 3]} // 模型缩放
        />

        {/* 添加轨道控制器 */}
        <OrbitControls />
      </Canvas>
    </>
  );
};

export default GLBViewer;
